<template>
  <a-card :bordered="false">
    <a-tabs :defaultActiveKey="tabName" @change="changeTab">
      <a-tab-pane tab="绩效评分（总经理）" key="1">
      </a-tab-pane>
      <a-tab-pane tab="评分记录" key="2">
      </a-tab-pane>
    </a-tabs>
    <div v-show="tabName == 1 ">
      <div class="table-page-search-wrapper" >
        <a-form layout="inline">
          <a-row :gutter="24">
            <a-col :md="6" :sm="24">
              <a-form-item label="评分年月">
                <a-input placeholder=""/>
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="24">
              <a-form-item label="部门类别">
                <a-select placeholder="请选择" default-value="0">
                  <a-select-option value="0">全部</a-select-option>
                  <a-select-option value="1">关闭</a-select-option>
                  <a-select-option value="2">运行中</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="24" v-if="advanced">
              <a-form-item label="被评分部门">
                <a-select placeholder="请选择" default-value="0">
                  <a-select-option value="0">全部</a-select-option>
                  <a-select-option value="1">关闭</a-select-option>
                  <a-select-option value="2">运行中</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <template v-if="false">
             
              <a-col :md="8" :sm="24">
                <a-form-item label="更新日期">
                  <a-date-picker style="width: 100%" placeholder="请输入更新日期"/>
                </a-form-item>
              </a-col>
              <a-col :md="8" :sm="24">
                <a-form-item label="使用状态">
                  <a-select placeholder="请选择" default-value="0">
                    <a-select-option value="0">全部</a-select-option>
                    <a-select-option value="1">关闭</a-select-option>
                    <a-select-option value="2">运行中</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
            </template>
            <a-col :md="6" :sm="8">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
                <a-button type="primary" icon="search">查询</a-button>
                <a-button type="primary" icon="reload" style="margin-left: 8px">重置</a-button>
                <a @click="toggleAdvanced" style="margin-left: 8px">
                  {{ advanced ? '收起' : '展开' }}
                  <a-icon :type="advanced ? 'up' : 'down'"/>
                </a>
              </span>
            </a-col>
            <!-- <a-col :md="!advanced && 6 || 6" :sm="24">
              <span class="table-page-search-submitButtons" :style="advanced && { float: 'right', overflow: 'hidden' } || {} ">
                <a-button type="primary">查询</a-button>
                <a-button style="margin-left: 8px">重置</a-button>
                <a @click="toggleAdvanced" style="margin-left: 8px">
                  {{ advanced ? '收起' : '展开' }}
                  <a-icon :type="advanced ? 'up' : 'down'"/>
                </a>
              </span>
            </a-col> -->
          </a-row>
        </a-form>
      </div>
      <a-table
        :customRow="dbClickRow"
       :columns="columns" 
       :dataSource="loadData" 
       :bordered="false" >
        <template
          v-for="col in ['all', 'action', 'address']"
          :slot="col"
          slot-scope="text, record, index">
          <div :key="col">
            <a-input
              v-if="record.editable"
              style="margin: -5px 0"
              :value="text"
              @change="e => handleChange(e.target.value, record.key, col)"
            />
            <template v-else>{{text}}</template>
          </div>
        </template>
        <template slot="operation" slot-scope="text, record, index">
          <div class="editable-row-operations">
            <span v-if="record.editable">
              <a @click="() => save(record.key)" style="margin-right:5px">保存</a>
              <a-popconfirm title="确定要取消修改?" @confirm="() => cancel(record.key)">
                <a>取消</a>
              </a-popconfirm>
            </span>
            <span v-else>
              <!-- <a @click="() => edit(record.key)" style="margin-right:5px">修改</a> -->
              <a @click="() => splitPane(record.key)">详情</a>
              <!-- <a @click="() => edit(record.key)">Edit</a> -->
            </span>
          </div>
        </template>
      </a-table>
    </div>
    <div v-show="tabName == 2 ">
      <div class="table-page-search-wrapper" >
        <a-form layout="inline">
          <a-row :gutter="24">
            <a-col :md="6" :sm="24">
              <a-form-item label="评分年月">
                <a-input placeholder=""/>
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="24">
              <a-form-item label="被评分部门">
                <a-select placeholder="请选择" default-value="0">
                  <a-select-option value="0">全部</a-select-option>
                  <a-select-option value="1">关闭</a-select-option>
                  <a-select-option value="2">运行中</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="8">
              <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
                <a-button type="primary" icon="search">查询</a-button>
                <a-button type="primary" icon="reload" style="margin-left: 8px">重置</a-button>
              </span>
            </a-col>
            <!-- <a-col :md="!advanced && 6 || 6" :sm="24">
              <span class="table-page-search-submitButtons" :style="advanced && { float: 'right', overflow: 'hidden' } || {} ">
                <a-button type="primary">查询</a-button>
                <a-button style="margin-left: 8px">重置</a-button>
                <a @click="toggleAdvanced" style="margin-left: 8px">
                  {{ advanced ? '收起' : '展开' }}
                  <a-icon :type="advanced ? 'up' : 'down'"/>
                </a>
              </span>
            </a-col> -->
          </a-row>
        </a-form>
      </div>
      <a-table :columns="columns2" :dataSource="loadData2" :bordered="false" >
      </a-table>
      <split-panel-modal ref="splitPanelModal"></split-panel-modal>
    </div>
  </a-card>
  
</template>

<script>
  import SplitPanelModal from './SplitPanelModal'
  export default {
    name: "TableList",
    components: {
      SplitPanelModal
    },
    data () {
      return {
        // 高级搜索 展开/关闭
        advanced: false,
        // 查询参数
        queryParam: {
          pageNo: 1,
          pageSize: 10
        },
        // 表头
        columns: [
          {
            title: '',
            dataIndex: 'idx',
            width: 50
          },
          {
            title: '评分年月',
            dataIndex: 'no',
            scopedSlots: { customRender: 'no' },
          },
          {
            title: '被评分部门',
            dataIndex: 'description',
            width: 120,
            scopedSlots: { customRender: 'description' },
          },
          {
            title: '评分指标',
            dataIndex: 'callNo',
            sorter: true,
            needTotal: true,
            scopedSlots: { customRender: 'callNo' },
            // customRender: (text) => text + ' 次'
          },
          {
            title: '总分',
            dataIndex: 'all',
            needTotal: true,
            scopedSlots: { customRender: 'all' },
          },
          {
            title: '评分',
            dataIndex: 'scroe',
            scopedSlots: { customRender: 'scroe' },
          },
          {
            title: '一月',
            dataIndex: 'month1',
          },
          {
            title: '二月',
            dataIndex: 'month2',
          },
          {
            title: '三月',
            dataIndex: 'month3',
          },
          {
            title: '四月',
            dataIndex: 'month4',
          },
          {
            title: '五月',
            dataIndex: 'month5',
          },
          {
            title: '六月',
            dataIndex: 'month6',
          },
          {
            title: '七月',
            dataIndex: 'month7',
          },
          {
            title: '八月',
            dataIndex: 'month8',
          },
          {
            title: '九月',
            dataIndex: 'month9',
          },
          {
            title: '十月',
            dataIndex: 'month10',
          },
          {
            title: '十一月',
            dataIndex: 'month12',
          },
          {
            title: '十二月',
            dataIndex: 'month13',
          },
          {
            title: '意见',
            dataIndex: 'action',
            scopedSlots: { customRender: 'action' },
          },
          {
            table: '操作',
            dataIndex: 'operation',
            width: '120px',
            scopedSlots: { customRender: 'operation' },
          }
        ],
        columns2: [
          {
            title: '',
            dataIndex: 'idx',
            width: 50
          },
          {
            title: '评分年月',
            dataIndex: 'no',
            scopedSlots: { customRender: 'no' },
          },
          {
            title: '被评分部门',
            dataIndex: 'description',
            width: 120,
            scopedSlots: { customRender: 'description' },
          },
          {
            title: '累计总分',
            dataIndex: 'callNo',
            needTotal: true,
            scopedSlots: { customRender: 'callNo' },
            // customRender: (text) => text + ' 次'
          },
          {
            title: '一月',
            dataIndex: 'month1',
          },
          {
            title: '二月',
            dataIndex: 'month2',
          },
          {
            title: '三月',
            dataIndex: 'month3',
          },
          {
            title: '四月',
            dataIndex: 'month4',
          },
          {
            title: '五月',
            dataIndex: 'month5',
          },
          {
            title: '六月',
            dataIndex: 'month6',
          },
          {
            title: '七月',
            dataIndex: 'month7',
          },
          {
            title: '八月',
            dataIndex: 'month8',
          },
          {
            title: '九月',
            dataIndex: 'month9',
          },
          {
            title: '十月',
            dataIndex: 'month10',
          },
          {
            title: '十一月',
            dataIndex: 'month12',
          },
          {
            title: '十二月',
            dataIndex: 'month13',
          },
          {
            title: '一季度',
            dataIndex: 'jd1',
          },
          {
            title: '二季度',
            dataIndex: 'jd2',
          },
          {
            title: '三季度',
            dataIndex: 'jd3',
          },
          {
            title: '四季度',
            dataIndex: 'jd4',
          }
        ],
        // 加载数据方法 必须为 Promise 对象
        loadData: [],
        loadData2: [],
        selectedRowKeys: [],
        selectedRows: [],
        tabName: "1"
      }
    },
    methods: {
      dbClickRow(record){
        return {
          on: { // 事件
            dblclick: (event) => {
              this.edit(record.key)
            },
          },
        };
      },
      changeTab(key) {
        this.$nextTick(function(){
          this.tabName = key
        })
        if(key === "1"){
          // this.tabname = "1";
        }else{
          // this.tabname = "2";
        }
      },
      queryData(){
        this.$http.get('/api/service', {
          params: Object.assign(this.queryParam)
        }).then(res => {
            this.loadData = res.result.data.map((item,index)=>{
              item.idx = index*1+1
              return item
            })
        })
      },
      toggleAdvanced () {
        this.advanced = !this.advanced
      },
      handleChange(value, key, column) {
        const newData = [...this.loadData];
        const target = newData.filter(item => key === item.key)[0];
        if (target) {
          target[column] = value;
          this.loadData = newData;
        }
      },
      edit(key) {
        const newData = [...this.loadData];
        const target = newData.filter(item => key === item.key)[0];
        if (target) {
          target.editable = true;
          this.loadData = newData;
        }
      },
      save(key) {
        const newData = [...this.loadData];
        const target = newData.filter(item => key === item.key)[0];
        console.log(target)
        if (target) {
          delete target.editable;
          this.loadData = newData;
          // this.loadData = newData.map(item => ({ ...item }));
        }
      },
      cancel(key) {
        const newData = [...this.loadData];
        const target = newData.filter(item => key === item.key)[0];
        if (target) {
          Object.assign(target, this.loadData.filter(item => key === item.key)[0]);
          delete target.editable;
          this.loadData = newData;
        }
      },
      splitPane(){
        this.$refs.splitPanelModal.show();
      }
    },
    watch: {
      /*
      'selectedRows': function (selectedRows) {
        this.needTotalList = this.needTotalList.map(item => {
          return {
            ...item,
            total: selectedRows.reduce( (sum, val) => {
              return sum + val[item.dataIndex]
            }, 0)
          }
        })
      }
      */
    },
    mounted() {
      this.queryData()
    }
  }
</script>

<style lang="scss" scoped>
  .search {
    margin-bottom: 54px;
  }

  .fold {
    width: calc(100% - 216px);
    display: inline-block
  }

  .operator {
    margin-bottom: 18px;
  }

  @media screen and (max-width: 900px) {
    .fold {
      width: 100%;
    }
  }
</style>